<template>
	<view class="goods-type-content">
		<u-navbar title="商品分类管理" :autoBack="true" bgColor="#9dae8a" placeholder></u-navbar>
		<u-toast ref="uToast"></u-toast>
		<view class="search">
			<u-search shape="square" placeholder="请输入分类关键字搜索" v-model="name" searchIconColor="#9dae8a" @clear="getGoodsTypeList" @custom="getGoodsTypeList"></u-search>
		</view>
		<ycy-swipe-action :options="options" :list="typeList" textKey='name' @onBtnClick="onBtnClick"></ycy-swipe-action>
		<view class="save-btn">
			<u-button text="新增商品分类" icon="plus" color="#9dae8a" iconColor="#fff" @click="onAdd"></u-button>
		</view>
		<u-modal :show="isShowEdit" :showCancelButton="true" :title="popverTitle" @cancel="onCanacel"  @confirm="onSubmitEdit">
			<u--form :borderBottom="false" labelWidth="100">
				<u-form-item label="商品分类名称" prop="typeName">
					<u--input v-model="inputName" border="bottom" clearable placeholder="请输入商品分类"></u--input>
				</u-form-item>
			</u--form>
		</u-modal>
		<u-modal :show="isShowDelete" :showCancelButton="true" :title="`确定要删除 ${deleteItem.name} 商品分类吗`"
		  content="删除分类时,分类下的所有商品也将被删除。" @cancel="isShowDelete=false"  @confirm="onSubmitDelete"></u-modal>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getGoodsTypeList();
		},
		data() {
			return {
				name: '',
				inputName: '',
				popverTitle: '新增商品分类',
				isShowEdit: false,
				isShowDelete: false,
				updateItem: {},
				deleteItem: {},
				deleteContent: '',
				options: [{
						text: '修改',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					},
				],
				typeList: [],
			}
		},
		methods: {
			onBtnClick(btnObject) {
				const index = btnObject.index;
				const item = JSON.parse(btnObject.name);
				if(index == 0) this.update(item);
				else if(index == 1) this.delete(item);
				// console.log('onbtnClick',item)
			},
			update(item) {
				this.updateItem = item;
				this.inputName = item.name;
				this.isShowEdit = true;
				this.popverTitle = '修改商品分类';
			},
			delete(item) {
				// console.log('删除',item)
				this.isShowDelete = true;
				this.deleteItem = item;
			},
			async onSubmitDelete() {
				const res = await this.$api.goodsType.delete(this.deleteItem.id);
				if(res.code == 200) {
					this.getGoodsTypeList();
					this.isShowDelete = false;
					this.$toast.success(this,'删除成功');
				}else {
					this.isShowDelete = false;
					this.$toast.error(this,res.message);
				}
			},
			onAdd() {
				this.inputName = '';
				this.isShowEdit = true;
				this.popverTitle = '新增商品分类';
			},
			onCanacel() {
				this.isShowEdit = false;
			},
			async onSubmitEdit() {
				if(this.inputName && this.inputName.length >= 5) {
					this.$toast.error(this,'商品分类名不超过5个字');
					return;
				}
				let res;
				if(this.popverTitle == '新增商品分类') res = await this.$api.goodsType.save({ name: this.inputName });
				else res = await this.$api.goodsType.save({ id: this.updateItem.id, name: this.inputName });
				if(res.code == 200) {
					this.getGoodsTypeList();
					this.onCanacel();
					if(this.popverTitle == '新增商品分类') this.$toast.success(this,'新增成功');
					else this.$toast.success(this,'修改成功');
				}else {
					this.$toast.error(this,res.message);
					this.onCanacel();
				}
			},
			async getGoodsTypeList() {
				const res = await this.$api.goodsType.findAll(this.name);
				if(res.code == 200) this.typeList = res.data;
				else this.$toast.error(this,res.message)
			}
		}
	}
</script>

<style lang="scss">
	.goods-type-content {
		height: 100vh;
		margin-bottom: $safe-bottom-spacing;
		position: relative;
		.search {
			margin: $spacing-small 0;
		}
	}
	.save-btn {
		z-index: 10;
		position: fixed;
		bottom: $spacing-large;
		left: 50%;
		transform: translateX(-50%);
		width: 90%; 
	}
	.edit-popver {
		padding: 0 $spacing-small;
		.edit-popver-title {
			.edit-popver-title-text {
				font-weight: bold;
			}
			.edit-popver-title-btn {
				letter-spacing: 2px;
			}
			
			display: flex;
			justify-content: space-between;
			
			padding: $spacing-small  0;
		}
	}
	
</style>